<template>
  <div class="mod-config">
    <div class="queryData">
      <el-form class="queryForm" :inline="true" label-width="0" :model="form">
        <el-form-item label="">
          <el-input v-model="form.name" size="small" placeholder="字典名称" />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.name" size="small" placeholder="字典类型" />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.name" size="small" placeholder="字典值" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary">查询</el-button>
          <el-button size="mini" type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <vxeLable
      ref="vxeLable"
      :table-config="tableConfig"
      @edit="editData"
      @del="delData"
      @add="addData"
      @import="importData"
      @export="exportData"
      @checkboxChange="checkboxChange"
    >
      <div slot="header">
        <el-button size="mini" icon="el-icon-circle-plus-outline" type="primary"
          @click="addData"
          >新增</el-button
        >
        <el-button size="mini" icon="el-icon-delete" type="danger"
          >删除</el-button
        >
      </div>
    </vxeLable>

    <!-- 弹窗, 新增 / 修改 -->
    <elDialog :dialog="dialog">
      <add @close="close" />
    </elDialog>
  </div>
</template>

<script>
import vxeLable from "@/components/common/vxeLable";
import vxeLableJs from "@/components/mixins/vxeLable.js";
import elDialog from "@/components/common/dialog";
import add from "./add";
export default {
  components: {
    vxeLable,
    elDialog,
    add
  },
  mixins: [vxeLableJs],
  data() {
    return {
      form: {},
      dialog: {
        show: false,
        title: "详情",
        width: "30%"
      },
      tableConfig: {
        api: "",
        height: 700,
        operateBtns: [
          { emit: "edit", name: "修改", type: "primary" },
          { emit: "del", name: "删除", type: "danger" }
        ],
        tableData: [
          {
            userId: 1,
            username: "admin",
            password:
              "0bae7b5f63ac9b5a4a31b21b54e16334ae8152a0db75168a14a7d0c5ce99ee2b",
            salt: "YzcmCZNvbXocrsz9dm8e",
            email: "root@renren.io",
            mobile: "13612345678",
            status: 1,
            roleIdList: null,
            deptId: 1,
            createUserId: 1,
            createTime: "2016-11-12 00:11:11"
          },
          {
            userId: 2,
            username: "test",
            password:
              "1b92ba0a82286413dc4c5b4f50f8a5d49a7f8a5749f833c463c101e372c4eb5b",
            salt: "aF7DR5tw2I3GvsO1v3Fm",
            email: "1@1.com",
            mobile: "18627319669",
            status: 1,
            roleIdList: null,
            deptId: 2,
            createUserId: 1,
            createTime: "2020-05-08 02:00:37"
          },
          {
            userId: 3,
            username: "huguoxing",
            password:
              "c7ca56c92608d3cebe0509b94a8844dfa117a85015e2e1ea8c2d93a2c062b4fd",
            salt: "LrN89yIy45m8WKLn8VeS",
            email: "1@1.com",
            mobile: "18627319669",
            status: 1,
            roleIdList: null,
            deptId: 3,
            createUserId: 1,
            createTime: "2020-08-12 22:35:12"
          },
          {
            userId: 4,
            username: "liguoqing",
            password:
              "e02a5dc9d2404510364ddb699c250d90f1f86905fe83675943fefdc92dbb660f",
            salt: "C5UWEZkn6iccBpbDFtwk",
            email: "1@1.com",
            mobile: "18888888888",
            status: 1,
            roleIdList: null,
            deptId: 4,
            createUserId: 1,
            createTime: "2020-08-14 04:46:56"
          },
          {
            userId: 5,
            username: "yanglingling",
            password:
              "1f0a54be167b72e77df52e31629e3d50f5f8471eaa279740cb8a9f6d66de95ed",
            salt: "MXxcHXa7ASCnRGFfUbps",
            email: "1@1.com",
            mobile: "18888888888",
            status: 1,
            roleIdList: null,
            deptId: 1,
            createUserId: 1,
            createTime: "2020-08-27 05:05:43"
          },
          {
            userId: 6,
            username: "zhouchao",
            password:
              "9fb01c8b8cc3e7199faab63f968d79bcf362428f8028b4e4caddf71cecc446bd",
            salt: "TsZ5tpsuzEhRJQoOUbWZ",
            email: "872243324@qq.com",
            mobile: "13965677667",
            status: 1,
            roleIdList: null,
            deptId: 3,
            createUserId: 1,
            createTime: "2020-10-23 22:39:20"
          },
          {
            userId: 7,
            username: "zhangxiao",
            password:
              "5777d5a9eb88cc981a619bb8bcdb6ef7093092e5955dbf44a99e5a96ccef74da",
            salt: "nwxMn1oxMxnEdV3JfFR5",
            email: "aouaou@qq.com",
            mobile: "13123456789",
            status: 1,
            roleIdList: null,
            deptId: 5,
            createUserId: 1,
            createTime: "2021-01-26 00:09:09"
          },
          {
            userId: 8,
            username: "liuxu",
            password:
              "7d430a78c81fa53dd516ac81200bbf4fba6968c88dded47977723e6f30fea2f7",
            salt: "YY4kln8ywLuzpp75qBuZ",
            email: "123@12.com",
            mobile: "15874061554",
            status: 1,
            roleIdList: null,
            deptId: 2,
            createUserId: 1,
            createTime: "2021-02-03 23:02:14"
          },
          {
            userId: 30009,
            username: "test1",
            password:
              "2dd34d7b8faeddcf7c793aa335b1eb2bfff527c381a8897417fe1203243ea23d",
            salt: "yOZAzu8Q0gvkCrsdPxJj",
            email: "test1@qqq.com",
            mobile: "13145671234",
            status: 1,
            roleIdList: null,
            deptId: 2,
            createUserId: 1,
            createTime: "2021-07-21 03:32:32"
          }
        ],
        tableToolbar: {
          zoom: true,
          custom: true,
          slots: {
            buttons: "toolbar_buttons"
          }
        },
        tableColumn: [
          { type: "checkbox", width: 60, align: "center" },
          { type: "seq", width: 60, title: "序号" },
          { field: "username", title: "用户名" },
          { field: "email", title: "邮箱" },
          { field: "mobile", title: "备注" },
          { field: "status", title: "状态" },
          { field: "createTime", title: "创建时间" },
          {
            title: "操作",
            width: 150,
            align: "center",
            className: "operate",
            slots: { default: "operate" },
            fixed: "right"
          }
        ]
      },
      dataForm: {},
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false
    };
  },
  activated() {
    this.getDataList();
  },
  mounted() { },
  methods: {
    close() {
      this.dialog.show = false;
    },
    aaa(row) {
      console.log(row);
    },
    editData() {
      this.dialog.show = true;
    },
    delData() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addData() {
      this.detailsData = {};
      this.dialog.title = "新增";
      this.dialog.show = true;
    },
    importData() {
      this.$refs.vxeLable.uploadFileEvent(files => {
        const formBody = new FormData();
        formBody.append("file", files[0]);
        console.log("导入import", formBody);
      });
    },
    checkboxChange(val) {
      console.log(val, "checkbox");
    },
    exportData() {
      console.log("导出export");
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/menu/list"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.dataList = treeDataTranslate(data, "menuId");
        this.dataListLoading = false;
      });
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(`确定对[id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
            method: "post",
            data: this.$http.adornData()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => { });
    }
  }
};
</script>
<style scoped lang="scss">
.queryData {
  font-size: 0.14rem;
  color: #fff;
}
.queryForm {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
